<template>
	<view class="home-content">
		<view class="search" :class="{'fixed': isSearchBarFixed}">
			<view class="head-logo r-flex">
				<u--image :src="headtitle" width="54px" height="26px"></u--image>
				<text class="logo-text">专业案件管理系统</text>
			</view>
			<view class="head-search">
				<u-search v-model="searchCase" shape="square" placeholderColor="#b4b7bb" :show-action="false"
					borderColor="#5381FE" bgColor="none" searchIconSize="18" searchIconColor="#5381FE" height="42"
					:clearabled="true" placeholder="搜索案号/案件名称/当事人" searchIcon="/static/images/sousuo.png"></u-search>
			</view>
		</view>
		<view class="home-wrap">
			<view class="create r-flex">
				<view class="case-create r-flex" @click="addCase()">
					<view class="case-icon">
						<u--image :src="cicon" width="38px" height="41px"></u--image>
					</view>
					<view class="case-text c-flex">
						<text class="text">快速建案</text>
						<text style="color: rgba(255, 255, 255, .5);font-size: 13px;">移动创建案件</text>
					</view>
				</view>
				<view class="case-create date-create r-flex" @click="newSchedule()">
					<view class="case-icon">
						<u--image :src="dicon" width="38px" height="41px"></u--image>
					</view>
					<view class="case-text c-flex">
						<text class="text">添加日程</text>
						<text style="color: rgba(255, 255, 255, .5);font-size: 13px;">28个待管理</text>
					</view>
				</view>
			</view>
			<view class="create-record">
				<view class="record-title r-flex">
					<text>建案记录</text>
					<view class="more" @click="jumpToCase()">
						<u--text suffixIcon="arrow-right" color="#b4b7bb" :iconStyle="iconStyle" text="查看全部"></u--text>
					</view>
				</view>
				<view class="record-list">
					<u-scroll-list :indicator="false">
						<view class="scroll-list">
							<view class="record-item" v-for="item in caseList" :key="item.id">
								<view class="item-title">{{ item.name }}</view>
								<view class="item-type">{{ item.caseType }}</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="create-record">
				<view class="record-title r-flex">
					<text>我的案件</text>
					<view class="more" @click="jumpToCase()">
						<u--text suffixIcon="arrow-right" color="#b4b7bb" :iconStyle="iconStyle" text="查看全部"></u--text>
					</view>
				</view>
				<view class="record-list r-flex" style="align-items: center;">
					<view class="record-num">
						<u-grid :border="false" col="3">
							<u-grid-item>
								<text class="grid-num" style="color: #1E1F20;">{{caseList.length}}</text>
								<text class="grid-text">全部案件</text>
							</u-grid-item>
							<u-grid-item>
								<text class="grid-num" style="color: #1C5AD2;">2</text>
								<text class="grid-text">在办案件</text>
							</u-grid-item>
							<u-grid-item>
								<text class="grid-num">2</text>
								<text class="grid-text">结案案件</text>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>
			<view class="create-record">
				<view class="record-title r-flex">
					<text>我的日程</text>
					<view class="more" @click="jumpToDate()">
						<u--text suffixIcon="arrow-right" color="#b4b7bb" :iconStyle="iconStyle" text="查看全部"></u--text>
					</view>
				</view>
			</view>
		</view>
		<view class="schedule-day">
			<u-scroll-list :indicator="false">
				<view class="scroll-list" style="padding: 0;">
					<view class="day-item" v-for="(date, index) in lastWeekDates" :key="index"
						:class="date.week == getDayOfWeek()?'date-active':''">
						<view class="day">{{ date.date }}</view>
						<view class="week">{{ date.week }}</view>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<view class="my-schedule">
			<view class="schedule-list" :class="isShow?'activeEmpty':''">
				<view class="empty" v-if="isShow">
					<empty></empty>
				</view>
				<view class="list-item" v-for="(item,index) in trialCasesList" :key="index">
					<view class="item-time r-flex">
						<view class="time">10:20</view>
						<view class="attr">
							<text class="attr-type">{{item.procedure}}</text>
							<text class="attr-type">开庭</text>
						</view>
					</view>
					<view class="item-title">
						<text class="title">武大郎状告潘金莲出轨武大郎状告潘金莲出轨</text>
						<view class="item-address r-flex">
							<u-icon name="map" color="#ccc" size="22"></u-icon>
							<text style="padding-left: 5px;">合肥市包河区人民法院</text>
						</view>
					</view>
				</view>
				<view class="divide-line">
					<u-divider text="我是有底线的"></u-divider>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import color from '../../uni_modules/uview-ui/libs/config/color';
	import empty from "@/components/empty/empty.vue";
	export default {
		components: {
			empty
		},
		data() {
			return {
				caseList: [],
				headtitle: '/static/images/lvan.png',
				cicon: '/static/images/c_icon.png',
				dicon: '/static/images/d_icon.png',
				searchCase: "",
				isLogin: false,
				iconStyle: {
					fontSize: "14px",
					color: "#b4b7bb",
				},
				isSearchBarFixed: false, // 标记搜索栏是否固定
				searchBarTop: 0, // 搜索栏的初始位置
				lastWeekDates: this.getLastWeekDates(),
				trialCasesList: [
					{
						procedure: "调解"
					},{
						procedure: "调解"
					},{
						procedure: "调解"
					},
				]
			};
		},
		onShow: function() {
			// 判断用户登录状态
			if (!uni.getStorageSync('OPEN-ID')) {
				this.isLogin = false;
			} else {
				this.isLogin = true;
				uni.showTabBar();
			}
			this.baseListRequest();
		},
		onPageScroll(e) {
			// 当页面滚动超过搜索栏的位置时固定搜索栏
			if (e.scrollTop > this.searchBarTop) {
				this.isSearchBarFixed = true;
			} else {
				this.isSearchBarFixed = false;
			}
		},
		onReady() {
			// 获取搜索栏的位置
			const query = uni.createSelectorQuery().in(this);
			query.select('.search').boundingClientRect(data => {
				this.searchBarTop = data.top;
			}).exec();
		},
		computed: {
			isShow() {
				return this.trialCasesList.length == 0;
			}
		},
		mounted() {
			this.baseListRequest();
		},
		methods: {
			baseListRequest() {
				const that = this;
				let data = {};
				this.$sendRequest.getCaseList(data).then((res) => {
					if (res.code == 200) {
						this.caseList = res.data;
					} else {
						this.$refs.uToast.show({
							message: res.message,
							type: 'error',
						})
					}
				}).catch(err => {})
			},
			addCase() {
				if (this.isLogin == true) {
					uni.navigateTo({
						url: "/pages/caseList/addCase"
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/landPage"
					})
				}
			},
			newSchedule() {
				if (this.isLogin == true) {
					uni.navigateTo({
						url: "/pages/schedule/newSchedule"
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/landPage"
					})
				}
			},
			jumpToCase() {
				if (this.isLogin == true) {
					uni.switchTab({
						url: "/pages/caseList/caseList"
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/landPage"
					})
				}
			},
			jumpToDate() {
				if (this.isLogin == true) {
					uni.switchTab({
						url: "/pages/schedule/scheduleManagement"
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/landPage"
					})
				}
			},
			// 获取一周日期和周数
			getLastWeekDates() {
			  const dates = [];
			  for (let i = 0; i < 7; i++) {
				const date = new Date();
				date.setDate(date.getDate() + i);
				const dateObj = {
				  date: date.toLocaleDateString(),
				  week: this.getWeek(date)
				};
				dates.push(dateObj); // 确保数组顺序为从当前日期往前
			  }
			  return dates;
			},
			getWeek(date) {
			  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			  return weekdays[date.getDay()];
			},
			// 获取当天周几
			getDayOfWeek() {
			  const now = new Date();
			  const dayOfWeek = now.getDay();
			  const days = ['日', '一', '二', '三', '四', '五', '六'];
			  return '星期' + days[dayOfWeek];
			}
		}
	};
</script>
<style lang="scss" scoped>
	.home-content {
		width: 100%;
		min-height: 100vh;
		background-image: url();
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: top center;
		background-color: #fff;

		.home-wrap {
			padding: 40rpx 30rpx 0 30rpx;
		}
	}

	.search {
		width: 100%;
		padding: 0rpx 30rpx 20rpx 30rpx;
		position: fixed;
		z-index: 999;
		top: 0;

		.head-logo {
			padding-top: 102rpx;

			.logo-text {
				padding: 9rpx 0 0 16rpx;
				color: #0b101a;
				font-size: 30rpx;
				opacity: .7;
			}
		}

		.head-search {
			padding-top: 34rpx;
		}
	}

	.search.fixed {
		background-color: #fff;
		transition: .3s;
	}

	.create {
		width: 100%;
		height: 168rpx;
		margin-top: 254rpx;
		align-items: center;
		justify-content: space-between;

		.case-create {
			width: calc(50% - 12rpx);
			height: 100%;
			position: relative;
			align-items: center;
			background: linear-gradient(to right, #3a7dff, #6693ff);
			box-shadow: 0rpx 14rpx 32rpx 0rpx rgba(58, 125, 255, 0.35);
			border-radius: 20rpx;
			padding: 0 36rpx;

			.case-text {
				padding-left: 16rpx;

				.text {
					color: #fff;
					font-size: 34rpx;
					padding-bottom: 10rpx;
				}
			}
		}

		.date-create {
			background: linear-gradient(to right, #04a1ff, #29baff);
		}
	}

	.create-record {
		width: 100%;
		padding-top: 48rpx;

		.record-list {
			background-color: #fff;
			box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(231, 235, 243, 0.7);
			border-radius: 20rpx;
			min-height: 150rpx;
			align-items: center;
		}
	}

	.record-title {
		padding-bottom: 24rpx;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		color: #1e1f20;
		font-weight: 500;
	}

	.record-item {
		position: relative;
		width: 280rpx;
		background-color: #F5F7FB;
		border-radius: 20rpx;
		padding: 28rpx 18rpx;
		margin-left: 24rpx;

		.item-title {
			color: #76797f;
			padding-bottom: 10rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.item-type {
			display: inline-block;
			background-color: #E3EAFF;
			border-radius: 10rpx;
			font-size: 24rpx;
			color: #5381FE;
			padding: 8rpx 10rpx;
		}
	}

	.record-item:first-child {
		margin-left: 0;
	}

	.record-item:nth-child(2n) {
		.item-type {
			background-color: #FFEAE2;
			color: #FD7840;
		}
	}

	.record-num {
		width: 100%;
		color: #b4b7bb;
		font-size: 44rpx;
		
		.grid-num {
			font-weight: 500;
		}
		.grid-text {
			font-size: 26rpx;
		}
	}

	.schedule-day {
		width: 100%;
		padding: 0 30rpx;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		.day-item {
			padding: 16rpx 16rpx;
			padding-bottom: 24rpx;
			border-radius: 20rpx 20rpx 0px 0px;
			text-align: center;

			.day {
				font-size: 24rpx;
				color: #b4b7bb;
				padding-bottom: 6rpx;
			}

			.week {
				font-size: 30rpx;
				color: #1e1f20;
			}
		}
		.date-active {
			background-color: #F5F7FB;
		}
		.date-active .day,
		.date-active .week {
			color: #1c5ad2;
		}
	}

	.my-schedule {
		width: 100%;
		min-height: 300rpx;
		margin: 0 0 24rpx 0;
		padding-top: 16rpx;
		background-color: #F5F7FB;
		border-radius: 20rpx;

		.schedule-list {
			position: relative;
			padding: 0rpx 30rpx;
		}

		.schedule-list::before {
			content: "";
			position: absolute;
			left: 30rpx;
			top: 45rpx;
			width: 10rpx;
			height: 83%;
			border-left: dotted 1px #1c5ad2;
		}
		.activeEmpty::before {
			display: none;
		}
		.list-item {
			position: relative;
			padding: 16rpx 20rpx;

			.item-time {
				width: 100%;
				align-items: center;
				padding-bottom: 12rpx;

				.time {
					padding-right: 24rpx;
					font-size: 44rpx;
					font-weight: bold;
					color: #1c5ad2;
				}

				.attr {
					.attr-type {
						display: inline-block;
						background-color: #E3EAFF;
						border-radius: 10rpx;
						font-size: 24rpx;
						color: #5381FE;
						padding: 8rpx 10rpx;
					}

					.attr-type:nth-child(2) {
						margin-left: 12rpx;
						background-color: #FFEAE2;
						color: #FD7840;
					}
				}
			}

			.item-title {
				width: 100%;
				background-color: #fff;
				box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(231, 235, 243, 0.7);
				border-radius: 20rpx;
				padding: 24rpx 24rpx;

				.title {
					display: inline-block;
					padding-bottom: 12rpx;
					font-size: 32rpx;
					color: #1e1f20;
				}

				.item-address {
					margin-left: -4rpx;
					font-size: 26rpx;
					color: #76797f;
				}
			}
		}

		.list-item::after {
			content: "";
			position: absolute;
			left: -5.5rpx;
			top: 39rpx;
			width: 16rpx;
			height: 16rpx;
			background-color: #1c5ad2;
			border-radius: 50%;
			z-index: 10;
		}

		.list-item::before {
			content: "";
			position: absolute;
			left: -13rpx;
			top: 31rpx;
			width: 32rpx;
			height: 32rpx;
			background-color: #F5F7FB;
			border-radius: 50%;
			z-index: 9;
		}
	}

	.divide-line {
		padding: 10rpx 0;
	}

	.scroll-list {
		@include flex(column);
		flex-direction: row;
		padding: 20rpx 16rpx 0 16rpx;
	}

	.record-num /deep/ .u-grid {
		justify-content: space-between !important;
	}
	.schedule-day /deep/ .u-scroll-list{
		padding-bottom: 0!important;
	}
</style>